<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="max-width:500px;margin:10px auto;border:1px dashed darkgray;padding:10px 100px"
    >
      <el-form-item label="订单ID:">
        <el-input v-model="form._id" readonly></el-input>
      </el-form-item>
      <el-form-item label="出租方名称:">
        <el-input v-model="form.rentId.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="出租方手机号:">
        <el-input v-model="form.rentId.phone" readonly></el-input>
      </el-form-item>
      <el-form-item label="租赁方名称:">
        <el-input v-model="form.hireId.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="租赁方手机号:">
        <el-input v-model="form.hireId.phone" readonly></el-input>
      </el-form-item>
      <el-form-item label="车名:">
        <el-input v-model="form.carId.carname" readonly></el-input>
      </el-form-item>
      <el-form-item label="车牌号:">
        <el-input v-model="form.carId.licencePlate" readonly></el-input>
      </el-form-item>
      <el-form-item label="地址:">
        <el-input v-model="form.carId.location" readonly></el-input>
      </el-form-item>
      <el-form-item label="交易开始时间:">
        <el-input v-model="form.orderDate" readonly></el-input>
      </el-form-item>
      <el-form-item label="归还时间:">
        <el-input v-model="form.finishDate" readonly></el-input>
      </el-form-item>
      <el-form-item label="支付金额:">
        <el-input v-model="form.price" readonly></el-input>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-input v-model="form.orderBool" readonly></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="returnOrder">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const axios = require('axios')
export default {
  created() {
    this.orderDeatail(this.$route.params._id);
  },
  data() {
    return {
      form: {
        _id:'',
        rentId:{},
        hireId:{},
        carId:{},
        orderDate:'',
        finishDate:'',
        orderBool:'',
        price:''
      },
      readonly: true
    };
  },
  methods: {
    orderDeatail(_id) {
      axios.post("/order/checkOrder", { _id }).then(({ data }) => {
        if (data.orderBool == "toBeConfirmed") {
          data.orderBool = "等待确认";
          data.price="未支付"
        } else if (data.orderBool == "unpaid") {
          data.orderBool = "待支付";
          data.price="未支付"
        } else if (data.orderBool == "transactionFailure") {
          data.orderBool = "交易失败";
          data.price="支付失败"
        } else if (data.orderBool == "paid") {
          data.orderBool = "已支付";
        } else if (data.orderBool == "dealClose") {
          data.orderBool = "交易完成";
        } else {
         data.orderBool = "等待确认";
        }
        this.form = data
      });
    },
    returnOrder(){
      this.$router.push('/admin/index/order')
    }
  }
};
</script>

<style>
.el-form .el-form-item {
  display: flex !important;
}
.el-input input {
  border: none;
  background-color: white;
}
.el-form-item__content{
  margin-left: 10px !important;
}
.el-form .el-form-item .el-form-item__label{
  width: 100px !important;
  text-align: left !important;
}
</style>